call()、apply()、bind()可控制函數的指向,可以借用其他函數的this。
可以造任何你呼叫的函數的拷貝,複製你想呼叫的函數,創造拷貝,然後設定this變數想要指向什麼,bind()是拷貝,不會執行函數,不會呼叫。
bind可設定拷貝函數的永久參數值,可設定不會變的預設參數。
例1:
把函數當作物件,函後呼叫物件的方法,傳入想要this指向的物件。
var person = {
firstname:'Jhon',
lastname:'Doe',
detFullName: function() {
var fullname = this.fistname + ' ' +this.lastname;
return fullname;
}
}
var logName = function(lang1, lang2) {
console.log('Logged:' + this.getFullName());
}
//在bind括號裡傳入rthis想指向的物件
var logPersonName = logNamw.bind(person);
logPersonName();
bind會回傳新的函數,複製logName函數,創造新的執行環境。
結果是
Logged: Jhon Doe
也可以這樣寫:
var person = {
firstname:'Jhon',
lastname:'Doe',
detFullName: function() {
var fullname = this.fistname + ' ' +this.lastname;
return fullname;
}
}
var logName = function(lang1, lang2) {
console.log('Logged:' + this.getFullName());
}.bind(person);
logName();
結果是
Logged: Jhon Doe
例2:
一樣可以接受參數
var person = {
firstname:'Jhon',
lastname:'Doe',
detFullName: function() {
var fullname = this.fistname + ' ' +this.lastname;
return fullname;
}
}
var logName = function(lang1, lang2) {
console.log('Logged:' + this.getFullName());
console.log('Arguments:' + lang1 + ' ' + lang2);
console.log('...');
}
var logPersonName = logNamw.bind(person);
//傳入參數en
logPersonName('en');
結果是
Logged: Jhon Doe
Arguments: en undefined
...
可以政this的值,也可以傳入參數,不像bind式創造函數的拷貝,call是會執行傳入的參數,先決定this變數是什麼,再來傳給函數參數,call會執行函數。
可控制this的值,也可傳入參數,會執行函數,和call不一樣的地方是要用陣列接受參數。
傳入call的第一個東西,是this要指向的東西,call和bind不宜一樣不是拷貝,是執行函數。
例:
用call,並傳入參數
logName.call(person, 'en' , 'es');
結果是
Logged: Jhon Doe
Arguments: en es
...
apply()接受陣列作為參數,這是apply和call的唯一差別
例:
logName.apply(person, ['en' , 'es']);
結果是
Logged: Jhon Doe
Arguments: en es
...
logName.apply(person, 'en' , 'es');
結果會出現錯誤
也可用函式表示式讓apply或call立即呼叫
例:
var person = {
firstname:'Jhon',
lastname:'Doe',
detFullName: function() {
var fullname = this.fistname + ' ' +this.lastname;
return fullname;
}
}
( function(lang1, lang2) {
console.log('Logged:' + this.getFullName());
console.log('Arguments:' + lang1 + ' ' + lang2);
console.log('...');
}).apply(person, ['en' , 'es']);
結果是
Logged: Jhon Doe
Arguments: en es
...
用apply舉其他例子
例:
var person2 = {
firstname:'Jhon',
lastname:'Doe',
}
}
console.log(person.getFullName.apply(person2));
結果是
Jhon Doe
建立一個函數的拷貝bind,並設定預設的參數,有利於資料庫做數學運算。
用bind給的參數,會設定為拷貝函數的永久參數值
例1:
第一個參數a會永遠是2
function multiply(a,b){
return a*b;
}
var multipleByTwo = multiply.bind(this,2);
//帶入第二個參數b
console.log(multipleByTwo(4));
結果是
8
例1:
參數a和b會永遠是2
function multiply(a,b){
return a*b;
}
var multipleByTwo = multiply.bind(this,2);
//帶入參數
console.log(multipleByTwo(4));
結果是
4
例1:
不設參數
function multiply(a,b){
return a*b;
}
var multipleByTwo = multiply.bind(this);
//帶入參數
console.log(multipleByTwo(2,5));
結果是
10